<!--
 * @Author: your name
 * @Date: 2020-11-02 10:29:36
 * @LastEditTime: 2020-11-03 17:12:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /gatt/src/modules/front/pages/Echarts/index.vue
-->
<template>
  <div class="map">
    <div id="box" :loading="loading" class="box"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import * as request from '@front/data/apis/JianxiEcharts'
// const jiangXiJson = require('./json/jiangxi_full.json')
export default {
  name: 'Echarts',
  mounted () {
    this.init()
  },
  data () {
    return {
      form: {
        // 默认江西
        name: 'jiangxi',
        label: '江西省'
      },
      mapDate: [{
        name: '南昌',
        value: [115.892151, 28.676493, 29999]
      }, {
        name: '景德镇',
        value: [117.214664, 29.29256, 29999]
      }, {
        name: '萍乡',
        value: [113.852186, 27.622946, 29999]
      }, {
        name: '赣州',
        value: [114.940278, 25.85097, 29999]
      }, {
        name: '吉安',
        value: [114.986373, 27.111699, 99999]
      }],
      mapJson: [{
        name: '南昌市',
        json: 'nanchang'
      },
      {
        name: '抚州市',
        json: 'fuzhou'
      },
      {
        name: '赣州市',
        json: 'ganzhou'
      },
      {
        name: '吉安市',
        json: 'jian'
      },
      {
        name: '景德镇市',
        json: 'jingdezheng'
      },
      {
        name: '九江市',
        json: 'jiujiang'
      },
      {
        name: '萍乡市',
        json: 'pingxiang'
      },
      {
        name: '上饶市',
        json: 'shangrao'
      },
      {
        name: '新余市',
        json: 'xinyu'
      },
      {
        name: '宜春市',
        json: 'yichun'
      },
      {
        name: '鹰潭市',
        json: 'yitang'
      }
      ],
      echartInstance: null,
      loading: false
    }
  },
  methods: {
    init () {
      this.echartsInit()
      this.getJsonInit()
    },
    echartsInit () {
      if (!this.echartInstance) {
        this.echartInstance = echarts.init(document.getElementById('box'))
      }
      this.echartInstance.on('click', (e) => {
        var chooseName = this.mapJson.filter(item => {
          return item.name === e.name
        })
        if (chooseName[0] && chooseName[0].json) {
          this.form.name = chooseName[0].json
          this.form.label = chooseName[0].name
          this.mapDate = []
          this.getJsonInit()
        }
      })
    },
    getJsonInit () {
      this.loading = true
      request.getJson(this.form).then(res => {
        this.setEcharts(res)
      }).catch(res => {
        this.$notify.error({
          title: '错误',
          message: (res.data && res.data.mesg) || (res.data && res.data.message) || res.mesg || res.message || '接口数据返回格式错误！'
        })
      })
        .finally(() => {
          this.loading = false
        })
    },
    setEcharts (resultJson) {
      this.echartInstance.showLoading()
      echarts.registerMap('jiangxi', resultJson, {})
      const option = {
        backgroundColor: '#020933',
        title: {
          top: 20,
          text: `“困难人数” - ${this.form.label}`,
          subtext: '',
          x: 300,
          textStyle: {
            color: '#ccc'
          }
        },
        visualMap: {
          min: 0,
          max: 1000000,
          right: 100,
          seriesIndex: 1,
          type: 'piecewise',
          bottom: 100,
          textStyle: {
            color: '#FFFF'
          },
          splitList: [{
            gt: 50000,
            color: '#F5222D',
            label: '困难人数大于5万人'
          }, // 大于5万人
          {
            gte: 30000,
            lte: 50000,
            color: '#FA541C ',
            label: '困难人数3-5万人'
          }, // 3-5万人
          {
            gte: 10000,
            lte: 30000,
            color: '#FA8C16',
            label: '困难人数1-3万人'
          }, // 1-3万人
          {
            lte: 10000,
            color: '#fbe1d6',
            label: '困难人数小于1万人'
          }
          ]
        },
        geo: {
          map: 'jiangxi',
          aspectScale: 0.75, // 长宽比
          zoom: 1.1,
          roam: false,
          itemStyle: {
            normal: {
              areaColor: '#013C62',
              shadowColor: '#182f68',
              shadowOffsetX: 0,
              shadowOffsetY: 25
            },
            emphasis: {
              areaColor: '#2AB8FF',
              borderWidth: 0,
              color: 'green',
              label: {
                show: false
              }
            }
          }
        },
        series: [{
          type: 'map',
          roam: true,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            },
            emphasis: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: '#2ab8ff',
              borderWidth: 1.5,
              areaColor: '#12235c'
            },
            emphasis: {
              areaColor: '#2AB8FF',
              borderWidth: 0,
              color: 'green'
            }
          },
          zoom: 1.1,
          // eslint-disable-next-line no-dupe-keys
          roam: false,
          map: 'jiangxi' // 使用
          // data: this.difficultData //热力图数据   不同区域 不同的底色
        }, {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          showEffectOn: 'render',
          rippleEffect: {
            period: 15,
            scale: 4,
            brushType: 'fill'
          },
          hoverAnimation: true,
          itemStyle: {
            normal: {
              color: '#ffff',
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          data: this.mapDate
        }]
      }
      this.echartInstance.setOption(option)
      this.echartInstance.hideLoading()
    }
  }
}
</script>

<style lang="stylus" scoped>
.map
  width 100%
  height 100%
  .box
    width 100%
    height 600px
</style>
